<template>
  <div>
    <el-row style="margin-top: 10px;">
      <el-col :span="20">
        <div>
          <el-button type="primary" @click="dialogFormVisible = true" :disabled="managerBasisInfoView.type === 2">
            添加管理员
          </el-button>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="text-align: right">
          <el-input placeholder="请输入用户名" v-model="userNameSearch" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 10px;">
      <el-table style="width: 100%" :data="managerList"
                border :empty-text="loadingFlag === true ? '正在拼命加载中...':'暂无数据'">
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="type" label="用户级别">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">超级管理员</span>
            <span v-else>管理员</span>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button :disabled="managerBasisInfoView.type === 2 || user.userId === scope.row.managerId"
                       size="mini"
                       type="danger"
                       @click="canDeleteManager(scope.$index, scope.row)">删 除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--请求标识-->
      <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else-if="managerPage.hasMore === true"
           style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;" @click="loadingMore()">
        <span>--点击加载更多--</span>
      </div>
      <div v-else-if="managerList.length > 0"
           style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--没有更多数据了--</span>
      </div>
    </div>

    <el-dialog title="添加管理员" :visible.sync="dialogFormVisible" width="25%" :before-close="closeDialog"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="managerView">
        <el-form-item label="用户名">
          <el-input type="text" placeholder="请输入用户名" v-model="managerView.userName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="" placeholder="请输入密码" v-model="managerView.pwd" autocomplete="off" show-password/>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="text" placeholder="请确认密码" v-model="managerView.confirmPwd" autocomplete="off" show-password/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary"
                   @click="addManager()">
          添 加
        </el-button>
      </div>
    </el-dialog>

    <!--删除提示框-->
    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="20%">
      <span>确认删除此管理员吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateManager()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Manager",
  data() {
    return {
      mediaHost: this.$global.mediaHost,
      managerList: [],
      managerPage: this.$global.indexPage,
      managerBasisInfoView: this.$global.managerBasisInfoView,
      user: this.$global.getUser(),
      paramsData: {
        page: {}
      },
      dialogFormVisible: false,
      deleteDialogVisible: false,
      loadingFlag: false,
      userNameSearch: '',
      managerView: {
        userName: '',
        pwd: '',
        confirmPwd: '',
      },
      managerId: '',
    }
  },
  mounted() {
    addEventListener('scroll', this.handleScroll)//监听函数
  },
  methods: {
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        if (this.managerPage.hasMore === true && !this.loadingFlag) {
          this.managerPage.page += 1;
          this.getManagerList();
        }
      }
    },
    loadingMore: function () {
      this.managerPage.page += 1;
      this.getManagerList();
    },
    closeDialog: function (done) {
      this.closeDialogDeleteData()
      done();
    },
    cancel: function () {
      this.dialogFormVisible = false
      this.closeDialogDeleteData()
    },
    closeDialogDeleteData: function () {
      this.managerView.userName = ''
      this.managerView.pwd = ''
      this.managerView.confirmPwd = ''
    },
    /**
     *确认删除管理员
     */
    canDeleteManager: function (index, row) {
      this.deleteDialogVisible = true
      this.managerId = row.managerId
    },
    search: function () {
      this.managerPage = this.$global.indexPage
      this.managerList = []
      this.getManagerList()
    },
    /**
     *获得管理员列表
     *
     */
    getManagerList: function () {
      this.loadingFlag = true;
      this.paramsData.page = this.managerPage
      this.paramsData.userNameSearch = this.userNameSearch
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/manager/getManagerList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag = false;
          this.managerList = this.managerList.concat(responseData.pageData.data)
          this.managerPage = responseData.pageData.page
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *获得课件列表
     *
     */
    addManager: function () {
      if (this.checkInput()) {
        this.dialogFormVisible = false
        this.paramsData.userName = this.managerView.userName
        this.paramsData.pwd = this.managerView.pwd
        this.paramsData.confirmPwd = this.managerView.confirmPwd
        this.$ajax({
          method: 'post',
          headers: this.$global.headers,
          url: this.$global.host + '/v1/manager/addManager',
          data: JSON.stringify({
            "data": this.paramsData,
            "user": this.$global.getUser(),
            "teamId": this.$global.getTeamId()
          }),
        }).then(response => {
          const responseData = response.data.data;
          const responseState = response.data.state
          if (2000 === responseState.code) {
            this.$message.success({
              message: "添加成功",
              center: true,
              duration: 1000
            });
            this.managerList = []
            this.managerPage = this.$global.indexPage
            this.closeDialogDeleteData()
            this.getManagerList()
          } else {
            this.$message.error({
              message: responseState.msg,
              center: true,
              duration: 1000
            });
          }
        }).catch(function (err) {
          console.log(err)
        })
      }
    },
    updateManager: function () {
      this.deleteDialogVisible = false
      this.paramsData.currentManagerId = this.managerId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/manager/updateManager',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "删除成功",
            center: true,
            duration: 1000
          });
          this.managerList = []
          this.managerPage = this.$global.indexPage
          this.closeDialogDeleteData()
          this.getManagerList()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    checkInput: function () {
      if (this.managerView.userName.length < 5 || this.managerView.userName.length > 20) {
        this.$message.warning({
          message: '用户名必须输入5~20位字符',
          center: true,
          duration: 1000
        });
        return false;
      }
      if (this.managerView.pwd.length < 6 || this.managerView.pwd.length > 20) {
        this.$message.warning({
          message: '密码必须输入6~20位字符',
          center: true,
          duration: 1000
        });
        return false;
      }
      if (this.managerView.pwd !== this.managerView.confirmPwd) {
        this.$message.warning({
          message: '两次密码输入不一致',
          center: true,
          duration: 1000
        });
        return false;
      }
      return true;
    }
  },
  created() {
    this.getManagerList()
  }
}
</script>

<style scoped>

</style>
